<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.global.js"></script>
</head>
<body>
<div id = 'app'>
    <input type="checkbox" v-model="fruits" value="西瓜">西瓜
    <input type="checkbox" v-model="fruits" value="花蜜给">花蜜给
    <input type="checkbox" v-model="fruits" value="苹果">苹果 <br>
    {{fruits}} <br>

    <input type="radio" v-model="gender" value="男">男
    <input type="radio" v-model="gender" value="女">女 <br>
    {{gender}} <br>

    <select v-model="city">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="杭州">杭州</option>
    </select>
    {{city}} <br>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                fruits:['西瓜' , '花蜜给' , '苹果'],
                gender: '男',
                city: '北京'
            }
        },
    });
    let vm = app.mount('#app');

</script>
</body>
</html>